<%@ page import="java.util.List" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreServiceFactory" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreService" %>
<%@ page import="com.google.appengine.api.datastore.Query" %>
<%@ page import="com.google.appengine.api.datastore.Entity" %>
<%@ page import="com.google.appengine.api.datastore.Key" %>
<%@ page import="com.google.appengine.api.datastore.KeyFactory" %>
<%@ page import="com.google.appengine.api.datastore.Query.FilterOperator" %>
<%@ page import="com.google.appengine.api.datastore.FetchOptions" %>
<%@ page import="com.google.appengine.api.images.*" %>
<%@ page import="com.google.appengine.api.blobstore.BlobKey" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Redirect to the login page if there is no session created -->
<%
if (session.getAttribute("username") == null) {
	response.sendRedirect("/login.jsp");
}
BlobstoreService blobstore = BlobstoreServiceFactory.getBlobstoreService();
DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();

Key accountKey = KeyFactory.createKey("Accounts", "accountName");
Query query = new Query("Account", accountKey).addFilter("username", FilterOperator.EQUAL, session.getAttribute("username"));
Entity user = datastore.prepare(query).asSingleEntity();

String changePassword = request.getParameter("Error");

double totalSize = 0.0;
Key mediaKey = KeyFactory.createKey("AudioFiles", "mediaFiles");
Query mediaQuery = new Query("Audio", mediaKey).addFilter("user", FilterOperator.EQUAL, (String)session.getAttribute("username")).addSort("mediaName", Query.SortDirection.ASCENDING);
List<Entity> uploadedAudioFiles = datastore.prepare(mediaQuery).asList(FetchOptions.Builder.withLimit(40));
for (Entity file: uploadedAudioFiles) {
	totalSize += Double.parseDouble(file.getProperty("fileSize").toString());
}
Key profilePicKey = KeyFactory.createKey("ProfilePicKey", "mediaFiles");
Query profilePicQuery = new Query("ProfilePic", profilePicKey);
Entity profilePic = datastore.prepare(profilePicQuery).asSingleEntity();
String imageURL = null;
if (profilePic != null) {
	BlobKey blobKey = (BlobKey) profilePic.getProperty("blobKey");
	ImagesService image = ImagesServiceFactory.getImagesService();
	imageURL = image.getServingUrl(blobKey, 300, true);
}
%>
<html>
	<head>
		<title><%= session.getAttribute("firstName") %>'s Profile | Media Vault</title>
		
		<!--icon-->
		<link rel="icon" href="images/mv.ico" type="">
		<!-- CSS -->
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
		<link rel="stylesheet" href="css/profile.css" type="text/css" />
		<!-- JavaScript -->
		<script type="text/javascript">
		function changePassword(){
			document.getElementById("popUpWindow").style.visibility='visible';
			document.getElementById("changePasswordForm").style.visibility='visible';
		}
		function changeProfilePic(){
			document.getElementById("popUpWindow").style.visibility='visible'; 
			document.getElementById("changeProfilePic").style.visibility='visible';
		}
		function closePopUpWindow(form) {
			document.getElementById("popUpWindow").style.visibility='hidden'; 
			document.getElementById(form).style.visibility='hidden';
		}
		</script>
	</head>

	<body>
		<%
		if (changePassword != null) {
			%>
			<script type="text/javascript">
				alert("Changing password failed!");
			</script>
			<%
		}
		%>
		
		<%if(session.getAttribute("account_type").equals("admin")){ %>
    		<div id="home_button">
    				<a href="adminInterface.jsp">
    					<img alt="" src="/images/home.png" width="40" height="40">
    					<p>Home</p>
    				</a>
    		</div>
    	<%} %>
		<div style="float:right;">
    		<!-- Login Status Bar -->
    		<jsp:include page="loginStatusBar.jsp" />
    	</div><br />
	
		<!-- Quick Menue -->
		<%if(!session.getAttribute("account_type").equals("admin")){ %>
    		<jsp:include page="quickMenue.jsp" />
    	<%} %>
    	
    	<!-- pop up window for changing passwords and uploading profile pictures -->
    	<div id="popUpWindow"></div>
		<div id="changePasswordForm">
   			<h3>Change Password</h3>
   			<div id="leftSide">
   				<img src="images/changePassword.png" alt="" style="width: 128px; height: 128px;" />
   			</div>
			<form method="post" action="/changePassword">
				<div class="inputSection">New Password: <input id="newPasswordID" type="password" name="newPassword" /></div>
				<div class="inputSection">Confirm Password: <input id="confirmPasswordID" type="password" name="confirmPassword" /></div>
				<div class="inputSection">Old Password: <input id="oldPasswordID" type="password" name="oldPassword" /></div>
				<div style="float:left; margin:10px 20px 0px 0px;">
					<button type="submit" name="btnSubmitPassword">Change Password</button>
				</div>
				<div style="float:left; margin-top:10px;">
					<button type="button" onClick="closePopUpWindow('changePasswordForm')">Cancel</button>
				</div>
			</form>
		</div>
		
		<div id="changeProfilePic">
			<h3>Change Profile Picture</h3>
			<form method="post" action="<%= blobstore.createUploadUrl("/changeProfilePic") %>" enctype="multipart/form-data">
				<div class="inputSection" style="margin-left: 0px">Upload Picture: <input type="file" name="uploadProfilePic" /></div>
				<div style="float:left; margin:10px 20px 0px 0px;">
					<button type="submit" name="btnSubmitPassword">Upload Picture</button>
				</div>
				<div style="float:left; margin-top:10px;">
					<button type="button" onClick="closePopUpWindow('changeProfilePic')">Cancel</button>
				</div>
			</form>
		</div>
		
		<div class="header" style="width:800px; margin-top:30px; margin-bottom: 30px;">
			<h1>Profile Information</h1>
		</div>
		
		<div id="wrapper" style="width:900px; margin-left:auto; margin-right:auto;">
			<div id="content">
				<div id="leftSide">
					<div id="profilePicture">
						<% if (imageURL != null) {
							%>
							<img src="<%= imageURL %>" width="230" height="230"/>
							<%
						} else {
							%>
							<img src="images/profile_picture.gif" width="230" height="230"/>
							<%
						}
						%>
					</div>
					<div id="changePassword">
						<form method="post" action="/home.jsp">
							<button name="btnHome" type="submit">Home</button>
						</form>
						<button name="btnChangePassword" onClick="changePassword()">Change Password</button>
						<button name="btnChangeProfilePic" onClick="changeProfilePic()">Change Profile Image</button>
					</div>
				</div>
				<div id="profileDetails">
					<h1><%= session.getAttribute("firstName") %> <%= session.getAttribute("lastName") %> (<%= session.getAttribute("account_type") %>)</h1>
					<h2>Email: </h2> <%= session.getAttribute("username") %>
					<h2>Password: </h2> <%= user.getProperty("password") %>
					<h2>Space Used: </h2> <%= (totalSize/(1024*1024)) %> MB
					<h2>Space Remaining: </h2> <%= 1000 - (totalSize/(1024*1024)) %> MB
					<h2>Account status: </h2> <%= user.getProperty("lockStatus") %>
				</div>
			</div>
		</div>
	</body>
</html>